<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定样式</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <style>
        .basic {
            border: 2px solid black;
            width: 400px;
            height: 400px;
        }
        
        .happy {
            border: 2px solid #4ddaab;
            background-color: rgb(224, 126, 14);
        }
        
        .sad {
            border: 2px solid #5b17c7;
            background-color: green;
        }
        
        .normal {
            border: 2px solid rgb(155, 223, 28);
            background-color: rgb(45, 0, 128);
        }
        
        .atguigul {
            border: 2px solid #00ff88;
            background-color: rgb(102, 173, 102);
        }
        
        .atguigu2 {
            border: 2px solid #f60f0f;
            background-color: green;
        }
        
        .atguigu3 {
            border: 2px solid #b1f60f;
            background-color: green;
        }
    </style>
    <!---->
    <div id="root">
        <!--绑定class样式,字符串写法,适用于:样式的类名不确定，需求动态绑定-->
        <div class="basic" :class="className" @click="chang">{{name}}</div>

        <!--class样式,字符串写法 ：绑定3个样式随机切换-->
        <div class="basic" :class="classNames" @click="chang_one">{{name}}</div>

        <!--绑定数组写法,适用于:要帮定的样式个数不确定，名字也不确定-->
        <div class="basic" :class="classNamesArr" @click="chang_teo">{{name}}</div>

        <!--绑定对象写法,适用于:要帮定的样式个数确定，名字也确定,但要动态决定用不用-->
        <div class="basic" :class="classNameobj" @click="chang_three">{{name}}</div>

        <!--style写法-->

        <!--style对象写法-->
        <div :style={fontSize:style_ine.fontSize,color:style_ine.color}>{{name}}</div>
        <div :style="style_ine">{{name}}</div>
        <div :style={fontSize,color}>{{name}}</div>

        <!--styles数组写法-->
        <div :style=[style_ine,style_two]>{{name}}</div>
    </div>
    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                name: "邓紫棋",
                className: "",
                classNames: "",
                fontSize: "40px",
                color: "green",
                classNamesArr: ["atguigul", "atguigu2", "atguigu3"],
                classNameobj: {
                    atguigul: false,
                    atguigu2: false

                },

                style_ine: {
                    fontSize: "40px",
                    color: "red"

                },
                style_two: {
                    backgroundColor: "black"
                }

            },
            methods: {
                chang() {
                    this.className = "sad"
                },

                //随机数切换
                chang_one() {
                    const classtext = ["happy", "sad", "normal"]
                        //获取0-3之间的随机数，并通过Math.floor向下取整
                    const Maths = Math.floor(Math.random() * 3)
                    alert(Maths)
                    this.classNames = classtext[Maths]
                    console.log(classtext[Maths])
                },

                //删除数组中的样式
                chang_teo() {
                    const classtext_ou = ["happy", "sad", "normal"]
                    this.classNamesArr.shift() //删除数组中第一个样式
                    this.classNamesArr.push(classtext_ou[0]) //在把classtext_ou数组中第一个样式追加给classNamesArr数组

                },

                //对象写法,对象里面的样式用不用
                chang_three() {
                    this.classNameobj.atguigul = !this.classNameobj.atguigul
                    console.log(this.classNameobj.atguigul)
                }

            }
        })
    </script>
</body>

</html